<template>
	<view class="auth-main">
		<image mode="widthFix" class="auth-image" src="../../static/images/img_auth_bg@3x.png"></image>
		<view class="auth-bg-mian">
			<view class="auth-bg-item"><label class="auth-bg-spot"></label><label
					class="auth-bg-text">完成认证后才能发布需求或者报名</label></view>
			<view class="auth-bg-item"><label class="auth-bg-spot"></label><label
					class="auth-bg-text">防止他人冒用您的身份信息</label></view>
		</view>
		<view class="form-item"><label class="form-label">姓名</label>
			<uni-easyinput class="form-input" type="text" v-model="userName" placeholder="请输入姓名" :inputBorder="false"
				:placeholderStyle="placeholderStyle" />
		</view>
		<view class="form-item"><label class="form-label">公司</label>
			<uni-easyinput class="form-input" type="idCard" v-model="idCard" placeholder="请输入身份证号" :inputBorder="false"
				:placeholderStyle="placeholderStyle" maxlength="18" />
		</view>
		<view class="footer">
			<view class="footer-text">实名信息仅用于认证，我们会100%保障信息安全</view>
			<button type="default" :disabled="disabled" class="sumbit-btn" @click="onSumbitClick">提交认证</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderStyle: 'font-size:30rpx;color:#d2d2d2;text-align: left;',
				userName: "",
				idCard: ""
			}
		},
		methods: {
			onSumbitClick: function() {
				if (!this.userName) {
					uni.showToast({
						icon: "none",
						title: "请输入姓名"
					})
					return;
				}
				if (!this.idCard) {
					uni.showToast({
						icon: "none",
						title: "请输入身份证号"
					})
					return;
				}
				// 调接口 认证
				var isSuccess = false;
				if (isSuccess) {
					uni.navigateTo({
						url: "./authSuccess"
					})
				} else {
					uni.navigateTo({
						url: "./authFail"
					})
				}
			}
		}
	}
</script>

<style>
	.auth-main {
		background-color: #F4F4F4;
		height: 100%;
	}

	.auth-image {
		width: 100%;
	}

	.auth-bg-mian {
		position: absolute;
		top: 0;
		height: 320rpx;
		display: flex;
		flex-flow: column;
		justify-content: center;
		padding: 0 32rpx;
	}

	.auth-bg-item {
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
	}

	.auth-bg-item:last-child {
		margin-bottom: 0;
	}

	.auth-bg-spot {
		width: 12rpx;
		height: 12rpx;
		background-color: #FFFFFF;
		margin-right: 16rpx;
	}

	.auth-bg-text {
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.form-item {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		height: 86rpx;
		padding: 0 32rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.form-label {
		font-size: 30rpx;
		color: #7B7B7B;
		width: 120rpx;
	}

	.form-input {
		flex: 1;
		margin-right: 10rpx;
		font-size: 30rpx;
		color: #181818;

	}

	.footer {
		position: fixed;
		bottom: 98rpx;
		width: 100%;
		text-align: center;
	}

	.footer-text {
		font-size: 20rpx;
		color: #7B7B7B;
		margin-bottom: 28rpx;
	}
</style>
